<template>
	<view>
		<u-navbar title="信息资讯" :autoBack="true" :bgColor="theme_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff"></u-navbar>
		<view :style="'margin-top:' + navH + 'px;'">
			<view>
				<u-tabs :list="cate_list" @click="cate_click" :lineColor="theme_color" :current="tabCurrent"></u-tabs>
			</view>

			<view style="width: 100%;height: 60px;display: flex;justify-content: flex-end;align-items: center;"
				v-if="cat_id == 100">
				<view style="margin-right: 10px;" @click="post">
					<u-button text="发文章" type="primary"></u-button>
				</view>
			</view>

			<view style="padding:0 10px 10px 10px;">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
					:up="upOption" :down="{auto:true}">
					<view class="item" v-for="(item,index) in article_list" :key="index"
						@tap="toDetail(item.article_id)" v-if="cat_id != 100">
						<view style="flex: 3;margin-right:10px;position: relative;">
							<view style="font-size: 16px;color: #302f2f;" class="line3">{{item.title}}
							</view>
							<view
								style="position: absolute;bottom: 10px;display: flex;justify-content: space-between;width: 100%;">
								<!-- <view style="font-size: 12px;color: #999696;">{{item.remark}}</view> -->
								<view style="font-size: 12px;color: #999696;">{{item.update_time.substring(0,11)}}
								</view>
							</view>
						</view>
						<view style="flex: 1;display: flex;align-items: center;margin: auto;">
							<u-image :src="item.pic_url" width="120px" height="90px" radius="5px"
								mode="aspectFit"></u-image>
						</view>
					</view>
					<view class="item" v-for="(item1,index1) in post_list" :key="index1" @tap="toPost(item1.pid)"
						v-if="cat_id == 100">
						<view style="flex: 3;margin-right:10px;position: relative;">
							<view style="font-size: 16px;color: #302f2f;" class="line3">{{item1.title}}
							</view>
							<view
								style="position: absolute;bottom: 10px;display: flex;justify-content: space-between;width: 100%;">
								<view style="font-size: 12px;color: #999696;">{{item1.create_time.substring(0,11)}}
								</view>
							</view>
						</view>
						<view style="flex: 1;display: flex;align-items: center;margin: auto;">
							<u-image :src="item1.poster" width="120px" height="90px" radius="5px"
								mode="aspectFit"></u-image>
						</view>
					</view>
				</mescroll-body>
			</view>
		</view>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapGetters
	} from "vuex";
	import {
		article_list
	} from '@/api/store.js'
	import {
		article_cate_public
	} from '@/api/public.js'
	import {
		post_list
	} from "@/api/classification.js";
	export default {
		mixins: [MescrollMixin],
		computed: mapGetters(["isLogin", "app_token"]),
		data() {
			return {
				navH: '',
				theme_color: getApp().globalData.theme_color,
				cate_list: [],
				article_list: [],
				cat_id: 0,
				upOption: {
					auto: true
				},
				tabCurrent: 1,
				post_list: [] //文章列表
			}
		},
		onLoad(e) {
			this.navH = getApp().globalData.navHeight / 2;
			if (e.cat_id) {
				this.cat_id = e.cat_id;
				this.tabCurrent = e.index;
			}
			this.getCate()
		},
		onShow() {

		},
		methods: {
			post() {
				this.$util.Tips('/pages/post/artical/index')
			},
			getCate() {
				article_cate_public({
					supplier_id:getApp().globalData.supplier_id,
					parent_id:0
				}).then(res => {
					var temp = [];
					if(res.data.length){
						temp = res.data;
						temp.forEach(item => {
							this.cate_list.push({
								name: item.cat_name,
								cat_id: item.cat_id
							})
						})
					}
					
				})
			},
			cate_click(item) {
				this.cat_id = item.cat_id;
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				var that = this;
				// if(that.cat_id != 100){
				article_list({
					cat_id: that.cat_id,
					page: page.num,
					supplier_id: getApp().globalData.supplier_id
				}).then(async (res) => {
					this.mescroll.endSuccess(res.data.length);

					//设置列表数据
					if (page.num == 1) this.article_list = []; //如果是第一页需手动制空列表
					this.article_list = this.article_list.concat(res.data); //追加新数据

				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
				// }else{
				// 	post_list({
				// 		fid: that.cat_id,
				// 		page: page.num,
				// 		province_id:  '',
				// 		city_id:  '',
				// 		district_id: '',
				// 		street_id: ''
				// 	}).then(async (res) => {
				// 		this.mescroll.endSuccess(res.data.length);

				// 		//设置列表数据
				// 		if (page.num == 1) this.post_list = []; //如果是第一页需手动制空列表
				// 		this.post_list = this.post_list.concat(res.data); //追加新数据

				// 	}).catch(() => {
				// 		//联网失败, 结束加载
				// 		this.mescroll.endErr();
				// 	})
				// }
			},
			toDetail(id) {
				uni.navigateTo({
					url: './detail?article_id=' + id
				})
			},
			toPost(id) {
				uni.navigateTo({
					url: '/pages/classification/detail?pid=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		padding: 16rpx;
		background-color: #fff;
		width: 100%;
		height: 120px;
		display: flex;
	}
</style>